<template>
  <div :class="{inline:judeg}" class="counter">
    <div class="counters" >
      <img src="../assets/icon/jian.png" @click="bnt('-')">
      <span>{{ count||data }}</span>
      <img src="../assets/icon/jia.png" @click="bnt('+')">
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,defineEmits} from 'vue'
interface counters {
  type:string
  data:number
}
let props = defineProps<counters>()

let judeg = ref()
if(props.type=='inline'){
  judeg.value=true
}
let count = ref<number>()
let emit = defineEmits(['counter'])
function bnt(a:string){
  if(!count.value) count.value=props.data
  if(a==='+'){
    count.value ++

  }else{
    if(count.value==props.data) return
    count.value --
  }
  emit('counter',count.value||props.data)
}

</script>

<style scoped lang="scss">
*{
  box-sizing: border-box;
}
.counter{
  vertical-align: top;
}
.counters{
    display: flex;
    img{
      width: 36px;
      height: 36px;
    }
    span{
      box-sizing: border-box;
      border-top: 1px solid #DBDBDB;
      border-bottom: 1px solid #DBDBDB;
      width: 45px;
      line-height: 34px;
      display: inline-block;
      text-align: center;
    }
  }
  .inline{
    display: inline-block;
  }
</style>